<template>
    <div class="P-parents page">
        <div class="content">
            <PlatformCrumb back="我的教案">
            </PlatformCrumb>
            <div class="p-upload-video">
                <h5></h5>
                <div class="p-upload-video-con">
                    <div class="p-uploadcon-item" v-for="(item, index) in courseList" :key="index">
                        <div class="p-imgvideo">
                            <div class="videoimg-div cur">
                                <img @click="toDetail(item.id)" :src='item.imgs|filtersImg'/>
                            </div>
                            <div class="course-btn display-flex-column" v-if="loginDis">
                                <img src="/images/delect.png" @click="showDelete(index)" class="delect cur"/>
                                <img src="/images/p-alter.png" class="p-alter cur" @click="toDetail(item.id)"/>
                            </div>
                        </div>
                        <p @click="toDetail(item.id)" class="look cur">{{item.name}}</p>
                    </div>

                </div>
                <el-pagination
                        @current-change="onChange"
                        layout="prev, pager, next"
                        :total="searchData.total">
                </el-pagination>
                <button class="new-course" @click="addCourse" v-if="loginDis">新增教案</button>
            </div>
        </div>
        <div v-show="isdelete" @click="delete_fun" class="mask"></div>
        <div v-show="isdelete" class="delete_sai">
            <div class="delete_sai_body">
                <div class="delete_sai_body2" style="width: 600px">
                    <div class="delete_sai_body2_head">
                        <span>删除教案</span>
                    </div>
                    <div class="delete_sai_body3">
                        <div class="delete_sai_body3_child">
                            <div class="delete_sai_body3_childl">
                                <img :src="deletedata.imgs|filtersImg" alt="">
                                <p>{{deletedata.name}}</p>
                            </div>
                        </div>
                        <div class="detail_but cur mb20" @click="getDelete(deletedata.id)">
                            删除
                        </div>
                    </div>
                </div>
            </div>
            <i class="el-icon-circle-close cur" @click="delete_fun"></i>
        </div>
    </div>
</template>

<script>
    import {mapActions, mapState, editCourse} from 'vuex'
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {baseImgPath, basefile} from '@/config/env.js';
    import {teachingPlanedit} from '../../api/api/coach.js';

    export default {
        components: {
            PlatformCrumb,
        },
        data() {
            return {
                key: "value",
                searchData: {
                    pageNum: 1,
                    total: 0,
                    id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                },
                courseList: [
                    // {
                    //   img: "/images/videoimg.jpg",
                    //   name: 'title',
                    //   id: 1
                    // }
                ],
                isdelete: false,
                deletedata: {
                    coachId: 0,
                    coachName: "string",
                    count: 0,
                    createTime: 1561259038000,
                    duration: 0,
                    equipment: "string",
                    id: 5,
                    imgs: "string",
                    mainPoints: "string",
                    method: "string",
                    name: "string",
                    practice: "string",
                    status: 0,
                    theme: "string",
                    time: 1561258927000,
                    updateTime: 1561912591000,
                }
            }
        },

        computed: {
            ...mapState('Login', [
                'userStatus'
            ]),

            loginDis() {
                return this.userStatus && this.userStatus.id ? true : false
            },
        },

        methods: {
            ...mapActions('myCourse', [
                'fetchCourseList'
            ]),
            showDelete(e) {
                this.isdelete = true
                this.deletedata = this.courseList[e]
            },
            delete_fun() {
                this.isdelete = !this.isdelete

            },
            getDelete(e) {
                var that = this;
                teachingPlanedit({
                    'status': 1,
                    'id': e,
                }).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        that.isdelete = false
                        that.getList()
                    }
                });
            },
            toDetail(id) {
                this.$router.push({path: '/coachTraining/lessonDetail', query: {id}})
            },

            addCourse() {
                this.$router.push('/coachTraining/lessonDetail')
            },

            onChange(val) {
                this.searchData.pageNum = val
                this.getList()
            },

            getList() {
                this.fetchCourseList(this.searchData).then(res => {
                    const {code, data: {list}} = res

                    if (code === 200) {
                        this.courseList = list || []
                    }
                })
            }
        },

        created() {
            this.getList()
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }
    }
</script>

<style scoped>
    @import url("P-coach.less");
</style>
